<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>进度上报</title>
    <link rel="shortcut icon" href="../favicon.ico">
    <link rel="stylesheet" href="http://cdn.staticfile.org/twitter-bootstrap/3.3.6/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="http://cdn.staticfile.org/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../../assets/js/dynatable/jquery.dynatable.css">


    <style>
    #head-image {
        width: 100%;
        margin-bottom: 2rem;
        /*background-image: url(http://wallpaper.zone/img/3743954.jpg);*/
        background-image: url(../../assets/image/progress/header-bg-stars.jpg);
        background-position-y: -387px;
        background-repeat: no-repeat;
        background-size: cover;
        text-align: center;
        font-size: 4rem;
        color: white;
        height: 150px;
        line-height: 150px;
    }
    
    html, body, button, input, select, textarea {
        font-family: "Microsoft Yahei", Arial, "Lantinghei SC", "Hiragino Sans GB", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
        font-size: 13px !important;
        font-weight: 100;
    }
    
    th {
        font-family: "Microsoft Yahei", Arial, "Lantinghei SC", "Hiragino Sans GB", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
        font-size: 13px !important;
        font-weight: 200 !important;
        text-align: center !important;
        color: black;
    }
    
    th a {
        color: #337ab7;
    }
    
    th a:hover {
        color: #337ab7;
    }
    
    
    
    label, table {
        font-weight: 100 !important;
    }
    
    .larger-right {
        margin-left: 150px;
        width: 100px;
    }
    </style>
</head>

<body>
    <div id="head-image">
        <span>兑奖进度状态上传系统</span>
    </div>
    <div class="container">
        <div class="row">
            <form class="form-inline">
                <div class="form-group">
                    <label for="exampleInputName2">用户名</label>
                    <input type="text" class="form-control" id="username" placeholder="周杰伦">
                </div>
                <div class="form-group">
                    <label for="exampleInputEmail2">授权码</label>
                    <input type="password" class="form-control" id="password" placeholder="">
                </div>
                <div class="form-group">
                    <input id="excelFile" type="file" class="filestyle" data-buttonText="选择进度文件" data-placeholder="No file">
                </div>
                <button id="btn-submit" type="submit" class="btn btn-default larger-right">提交</button>
            </form>
        </div>

    </div>
    
    <div class="container-fluid" style="margin-left: 10px; margin-right: 10px;">
        <div class="row" style="margin-top: 3rem;">
            <table id="my-ajax-table" class="table table-bordered">
                <thead>
                        <th data-dynatable-column="id">行次</th>
                        <th data-dynatable-column="result">入库状态</th>
                        <th data-dynatable-column="prize_status">奖品进度</th>
                        <th data-dynatable-column="status_comment">进度说明</th>
                        <th data-dynatable-column="activity_name">活动名称</th>
                        <th data-dynatable-column="created_date">填写日期</th>
                        <th data-dynatable-column="customer_name">顾客姓名</th>
                        <th data-dynatable-column="mobile_number">手机号码</th>
                        <!-- <th data-dynatable-column="product_model">产品型号</th> -->
                        <!-- <th data-dynatable-column="purchasing_date">购买日期</th> -->
                        <!-- <th data-dynatable-column="invoice_price">发票金额</th> -->
                        <th data-dynatable-column="province">省</th>
                        <th data-dynatable-column="city">市</th>
                        <th data-dynatable-column="district">区</th>
                        <th data-dynatable-column="street" style="text-align: left !important;">街道</th>
                        <th data-dynatable-column="invoice_remark" style="text-align: left !important;">发票备注</th>

                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
    <script src="../../assets/js/lottery/jquery-1.10.2.js" type="text/javascript" charset="utf-8"></script>
    <script src="http://cdn.staticfile.org/twitter-bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../assets/js/bootstrap-filestyle.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../assets/js/dynatable/jquery.dynatable.js" type="text/javascript" charset="utf-8"></script>
    <script>
        $("#btn-submit").click(function () {
            /* body... */
            var formData = new FormData();
            formData.append("username", $("#username").val());
            formData.append("password", $("#password").val());
            formData.append("excelFile", $("#excelFile")[0].files[0]);
            
            
            
            
            $.ajax({
                url: '/pana-BE-RESTful/progress/upload',
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                dataType: 'json',
                success: function (data) {
                    /* body... */
                    $('#my-ajax-table').dynatable({
                        dataset: {
                            records: data.result
                        },
                        features: {
                            paginate: false,
                            search: true,
                            recordCount: true,
                            perPageSelect: false
                        }
                    });
                },
                error: function (data) {
                    /* body... */
                }
            });
            
            return false;
            
        });
        
        
        
        
        
        
        
        
        
        
    </script>
</body>

</html>
